﻿@tailwind base;
@tailwind components;
@tailwind utilities;

@import './styles/theme.css';
@import './styles/utilities.css';
@import './styles/animations.css';
@import './styles/components.css';
@import './styles/responsive.css';
@import './styles/playlist.css';
@import "./styles/artplayer.css";


:root {
  --background: #11151d;
  --foreground: #f5f7fa;
  
  /* 定义默认根字体大小变量，JavaScript会动态更新这个变量 */
  --root-font-size: 1rem;
  
  /* 使用CSS变量设置字体大小，这样JavaScript修改变量时不会导致水合错误 */
  font-size: var(--root-font-size);
}

@media (min-width: 1920px) {
  :root {
    --root-font-size: calc(100vw / 1521 * 16);
  }
}

/* 基础样式 */
html, body {
  @apply bg-background-dark text-foreground antialiased;
  font-family: var(--font-pingfang);
  overscroll-behavior: none;
  @apply text-sm md:text-base;
  letter-spacing: 0.01em;
}

h1 {
  @apply text-xl font-bold md:text-2xl lg:text-3xl;
  letter-spacing: -0.01em;
}

h2 {
  @apply text-lg font-semibold md:text-xl lg:text-2xl;
  letter-spacing: -0.005em;
}

h3 {
  @apply text-base font-medium md:text-lg lg:text-xl;
  letter-spacing: -0.005em;
}

a {
  @apply text-foreground hover:text-foreground-muted transition-colors;
}

input, select, textarea {
  @apply bg-background-card border border-gray-700 rounded-md px-3 py-2 outline-none focus:ring-2 focus:ring-accent-primary focus:border-transparent;
}

button {
  @apply transition-all duration-200 rounded-md font-medium;
}
